<template>
    <div>
        <!--// 3.使用注册的组件 -->
        <loginOut title="转账" @onclickRight="onclickRight" @onclickLeft="onclickLeft"></loginOut>
        <div v-if="this.customData.showType === '0'">
            <van-dialog v-model="show" title="标题" show-cancel-button>
                <img src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
            </van-dialog>
        </div>
        <van-grid class="gridBox">
            <van-grid-item>
                <img src="./img/ico_danbizhuanzhang.svg">
                <p>单笔转账</p>
            </van-grid-item>
            <van-grid-item>
                <img src="./img/ic_shoujihaozhuanzhang.svg">
                <p>手机号转账</p>
            </van-grid-item>
            <van-grid-item @click="Overseas">
                <img src="./img/ic_jingwaihuikuan.svg">
                <p>境外汇款</p>
            </van-grid-item>
            <van-grid-item>
                <img src="./img/ic_yuyuezhuanzhang.svg">
                <p>预约转账</p>
            </van-grid-item>
        </van-grid>
        <van-grid :column-num="3" class="gridBox_2">
            <van-grid-item>
                <img src="./img/icon_shoukuanrenguanli.svg">
                <p>收款人管理</p>
            </van-grid-item>
            <van-grid-item>
                <img src="./img/ic_bangdingshoujihao.svg">
                <p>绑定手机号</p>
            </van-grid-item>
            <van-grid-item>
                <img src="./img/ic_zhuanzhangjilu.svg">
                <p>转账记录</p>
            </van-grid-item>
        </van-grid>
        <p class="title_Recent">最近转账</p>
        <div v-if="this.customData.showType === 0" class="none_Recent">
            <img src="./img/ic_zanwumingxi.svg">
            <p>暂无符合记录</p>
        </div>
        <div v-else-if="this.customData.showType === 1" class="none_Recent_2">
            <div>
                <img src="./img/ic_logo_zhaoshang.svg">
            </div>
            <div>
                <p class="name_1">张小</p>
                <p class="name_2">工商银行(0571)</p>
            </div>
            <div>
                1,000.00元
            </div>
        </div>

        <!-- 动作面板 -->
        <van-action-sheet v-model="show_toast" :actions="actions" cancel-text="取消" close-on-click-action
            @cancel="onCancel" @select="onSelect" />
        <!-- 动作面板提示 -->
        <van-dialog v-model="show_1" title="提示" show-cancel-button>

        </van-dialog>
        <van-dialog v-model="show_2" title="提示" show-cancel-button>

        </van-dialog>
    </div>
</template>

<script>
//1.引入封装的组件
import LoginOut from '../../../components/NavBar.vue'
import { getCase } from '../../../api/request'
export default {
    data() {
        return {
            customData: '',
            show: false,
            show_toast: false,
            show_1: false,
            show_2: false,
            actions: [{ name: '个人境外汇款' }, { name: '汇款记录查询' }],
        }
    },
    //2.注册组件
    components: {
        LoginOut,
    },
    mounted() {
        this.getData()
        this.$dialog.confirm({
            title: '提示',
            message: '现可以使用手机号转账啦，建议您绑定手机号，方便他人通过您手机号代替银行账号给您转账。',
            closeOnPopstate: false,
        }).then(() => {
            // on close
        });
    },
    // 4.调用事件方法
    methods: {
        onclickLeft() {
            this.$router.go(-1)
        },
        onclickRight() {
            console.log("右边点击事件...")
        },
        getData() {
            getCase({}).then(res => {
                this.customData = res.data
                console.log(this.customData);
            })
        },
        Overseas() {
            this.show_toast = true
        },
        onCancel() {
            Toast('取消');
        },
        onSelect(action, index) {
            console.log(action, index)
            if (action.name === '个人境外汇款') { // 点击反馈垃圾内容1时才出现二级反馈面板
                this.show_1 = true
                this.$dialog.confirm({
                    title: '提示',
                    message: '您还没有可转账的卡哦，去开通转账权限吧',
                    closeOnPopstate: false,
                }).then(() => {
                    // on close
                });
            } else if (action.name === '汇款记录查询') {
                this.show_2 = true
                this.$dialog.confirm({
                    title: '提示',
                    message: '抱歉，您目前暂未添加我行银行卡',
                    closeOnPopstate: false,
                }).then(() => {
                    // on close
                });
            }
        }
    }
}
</script>

<style scoped lang="scss">
.gridBox {
    background: url('./img/bg_card@2x.png') no-repeat;
    background-size: contain;
    width: 9.2rem;
    height: 3.0667rem;
    margin: auto;
}

.gridBox_2 {
    width: 9.2rem;
    height: 3.0667rem;
    margin: auto;

    .van-grid-item__content {
        img {
            width: .64rem;
            height: .64rem;
        }

        p {
            color: #000;
            font-size: 14px;
        }
    }

}

::v-deep .van-grid-item__content {
    background-color: unset !important;

    .van-grid-item__text {
        font-size: 14px;
        color: #fff;
    }

    img {
        width: .96rem;
        height: .96rem;
    }

    p {
        color: #fff;
        font-size: 14px;
    }
}

.title_Recent {
    font-size: 16px;
    color: #000;
    font-weight: 600;
    margin-left: .5333rem;
}

.none_Recent {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    img {
        width: 4.8rem;
        height: 4rem;
    }

    p {
        opacity: 0.6;
    }
}

.none_Recent_2 {
    width: 9.2rem;
    height: .5333rem;
    margin-top: 1rem;
    display: flex;
    justify-content: space-around;
    align-items: center;

    img {
        width: .96rem;
        height: 36px;
    }

    .name_1 {
        font-size: 14px;

    }

    .name_2 {
        opacity: 0.6;
    }
}
</style>